<template>
  <div class="app-container">
    <!-- 图表 -->
    <el-row>
      <el-col :span="6">
        <el-tooltip
          class="item"
          effect="dark"
          :content="allData.sessionId"
          placement="top-start"
        >
          <div class="session-text ids">
            <span class="title">会话编号：</span>{{ allData.sessionId }}
          </div>
        </el-tooltip>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">电话：</span>
          {{ desensitizePhone(allData.userTel) }}
        </div>
      </el-col>
      <el-col :span="6">
        <el-tooltip
          class="item"
          effect="dark"
          :content="allData.robotId"
          placement="top-start"
        >
          <div class="session-text ids">
            <span class="title">坐席编号：</span>{{ allData.robotId }}
          </div>
        </el-tooltip>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">消息接收时间：</span>{{ allData.createDate }}
        </div>
      </el-col>
    </el-row>

    <el-row class="item-row">
      <el-col :span="6">
        <div class="session-text">
          <span class="title">通话时长（毫秒）：</span>
          {{ desensitizePhone(allData.callDuration) }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">消息数量：</span>{{ allData.msgCount }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">有效性：</span
          >{{
            allData.status == 0
              ? "有效"
              : allData.status == 1
              ? "无效"
              : allData.status
          }}
        </div>
      </el-col>
      <el-col :span="6"> </el-col>
    </el-row>

    <el-row class="item-row">
      <el-col :span="6">
        <div class="session-text">
          <span class="title">大类：</span>
          {{ (sysOutPut && sysOutPut.pred) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">小类：</span
          >{{ (sysOutPut && sysOutPut.predTag) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">授权：</span
          >{{ (sysOutPut && sysOutPut.authorize) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">品牌：</span
          >{{ (sysOutPut && sysOutPut.brand) || "--" }}
        </div>
      </el-col>
    </el-row>

    <el-row :span="6" class="item-row">
      <el-col :span="6">
        <div class="session-text">
          <span class="title">车系：</span>
          {{ (sysOutPut && sysOutPut.series) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">省份：</span
          >{{ (sysOutPut && sysOutPut.province) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">城市：</span
          >{{ (sysOutPut && sysOutPut.city) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">姓氏：</span
          >{{ (sysOutPut && sysOutPut.surname) || "--" }}
        </div>
      </el-col>
    </el-row>

    <el-row class="item-row">
      <el-col :span="6">
        <div class="session-text">
          <span class="title">付款方式：</span
          >{{ (sysOutPut && sysOutPut.paymentMethod) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">购车时间：</span
          >{{ (sysOutPut && sysOutPut.outTime) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">是否结束：</span
          >{{ (sysOutPut && sysOutPut.isEnd) || "--" }}
        </div>
      </el-col>
    </el-row>

    <el-row class="item-row">
      <el-col :span="6">
        <div class="session-text">
          <span class="title">购车时间2：</span
          >{{ (sysOutPut && sysOutPut.timeType) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">是否有明确购车意图：</span
          >{{ (sysOutPut && sysOutPut.intension) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">是否质疑过：</span
          >{{ (sysOutPut && sysOutPut.question) || "--" }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="session-text">
          <span class="title">车辆类型：</span
          >{{ (sysOutPut && sysOutPut.type) || "--" }}
        </div>
      </el-col>
  
    </el-row>

    <el-row class="item-row">
      <el-col :span="24">
        <div class="session-text">
          <span class="title">是否完整单：</span
          >{{ (sysOutPut && sysOutPut.status) || "--" }}
        </div>
      </el-col>
      </el-row>
      
    <div class="derived-chat" v-if="isShowChatBtn">
      <el-button type="primary" :loading="isShowChatLoading" @click="onDerivedChat" size="small"
        >推导聊天</el-button
      >
    </div>
    <div
      ref="chart"
      style="width: 100%; height: 300px; margin-top: -10px"
    ></div>

    <!-- 表格   -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="50">
      </el-table-column>
      <el-table-column label="内容" align="center" prop="questionText" />
      <el-table-column label="来源" align="center" prop="source">
      </el-table-column>
      <el-table-column
        label="传输用时（毫秒）"
        align="center"
        prop="callDuration"
        width="180"
      >
      </el-table-column>

      <el-table-column
        label="消息接收时间"
        align="center"
        prop="createTime"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑 -->
    <edit-dialog
      :editShow="editShow"
      :questionText="questionText"
      :id="id"
      @onCloseEditDialog="onCloseEditDialog"
    ></edit-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getMsgList,
  getOutputByCustomerId,
} from "@/api/customerService/session";
import editDialog from "./components/editDialog.vue";

export default {
  name: "sessionData",
  components: { editDialog },
  data() {
    return {
      loading: false,
      tableData: [], //表格数据
      editShow: false,
      id: "",
      questionText: "",
      visibleShow: false,
      chart: null,
      allData: {},
      sysOutPut: null,
      isShowChatBtn:false,
      isShowChatLoading:false
    };
  },

  watch: {
    "$route.params": {
      async handler(val) {
        if (val?.sessionId) {
          this.sessionId = val?.sessionId;
          this.getList();
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // 在组件挂载完成后初始化图表
    this.initChart();
  },

  methods: {
    /** 查询字典数据列表 */
    async getList() {
      let params = {
        id: this.sessionId,
      };
      this.loading = true;
      const { data } = await getMsgList(params);
      this.allData = data;
      !data?.sysOutPut && (this.isShowChatBtn = true)
      this.sysOutPut = data?.sysOutPut;
      this.tableData = data?.msgList || [];
      this.loading = false;
      this.setOptions(data?.echatsCustomerVos || []);
    },

    // 编辑
    handleEdit({ id, questionText }) {
      this.editShow = true;
      this.id = id;
      this.questionText = questionText;
    },

    // 关闭编辑弹窗
    onCloseEditDialog() {
      this.editShow = false;
      this.id = "";
      this.questionText = "";
      this.getList();
    },

    // 手机号脱敏
    desensitizePhone(phone) {
      if (!phone) {
        return "";
      }
      const reg = /(\d{3})\d{4}(\d{4})/;
      return phone.replace(reg, (match, p1, p2) => `${p1}****${p2}`);
    },

    handleClose() {
      this.visibleShow = false;
      this.$emit("onCloseMessageDialog");
    },

    initChart() {
      this.chart = echarts.init(this.$refs.chart);
    },

    setOptions(backendData) {
      // 提取xAxis数据
      const xAxisData = backendData.map((item) => item.name);

      // 提取series数据
      const seriesData = backendData.map((item) => item.value);

      const option = {
        tooltip: {
          trigger: "axis", // 坐标轴触发
          extraCssText: "white-space: normal; max-width: 50%;",
          formatter: function (params) {
            let result =
              params[0].value + "（毫秒）" + "<br/>" + params[0].name + "<br/>";
            params.forEach((item) => {
              // 在backendData中找到与当前数据点对应的元素
              const dataItem = backendData.find(
                (data) => data.name === item.name
              );
              if (dataItem) {
                result += dataItem.content + "<br/>";
              }
            });
            return result;
          },
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          name: "",
          type: "value",
          axisLabel: {
            formatter: "{value}（毫秒）",
          },
        },
        series: [
          {
            type: "line",
            data: seriesData,
            lineStyle: {
              width: 2, // 折线宽度
            },
            symbol: "circle", // 数据点形状
            symbolSize: 6, // 数据点大小
            itemStyle: {},
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          show: true,
          borderWidth: 0,
          backgroundColor: "#fff",
          lineStyle: {
            color: "#eee", // 网格线颜色
            width: 1, // 网格线宽度
          },
        },
      };
      this.chart.setOption(option);
    },

    // 推导聊天
    async onDerivedChat() {
      let params = {
        id: this.sessionId,
      };
      this.isShowChatLoading = true
      const { data } = await getOutputByCustomerId(params);
      this.isShowChatLoading = false
      this.sysOutPut = data;
      this.isShowChatBtn = false
    },
  },
};
</script>

<style lang="scss" scoped>
.session-text {
  font-size: 14px;
  opacity: 0.5;
  .title {
    font-size: 15px;
    font-weight: 800;
    color: black;
  }
}
.ids {
  cursor: pointer;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-row {
  margin-top: 10px;
}

.derived-chat{
  margin-top: 10px;
}
</style>
